<template>
    <h1>{{ "parent" }}</h1>
    <p>Count: {{ countParent }}</p>
    <button @click="handleClick">+1</button>
    <child ref="childRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import child from "./child.vue";

import type { ComponentPublicInstance } from "vue";

interface ChildExpose {
    count: number;
    increment: () => void;
}

// ref 类型声明为组件实例
const childRef = ref<ComponentPublicInstance<ChildExpose> | null>(null);

// console.log(childRef.value.a); // 未经过defineExpose，无法访问

const countParent = ref(2);

const handleClick = () => {
    countParent.value = childRef.value!.count + 1;
    childRef.value?.increment();
};
</script>

<style scoped></style>
